<!--
 * @Author: 一品网络技术有限公司
 * @Date: 2022-08-27 19:55:50
 * @LastEditTime: 2024-03-15 10:54:08
 * @FilePath: \client\src\components\global\ypicon\ypicon.vue
 * @Description:
 * 联系QQ:58055648
 * Copyright (c) 2022 by 东海县一品网络技术有限公司, All Rights Reserved.
-->
<template>
	<div>
		<button class="btn" @click="isUpload = true">
			<i :class="modelValue || 'ri-question-fill'" class="ri-lg"></i>
		</button>
		<div
			class="bg-white absolute top-0 left-0 w-full h-full z-50"
			v-if="isUpload"
		>
			<div class="flex flex-wrap w-full">
				<div
					v-for="(item, index) in dataList"
					:key="index"
					class="p-2"
					@click="handleSelect(item.name)"
				>
					<div
						class="w-10 h-10 flex flex-col justify-center items-center rounded-sm hover:bg-hui-50 text-hui-300 duration-300 cursor-pointer group"
					>
						<div>
							<i :class="item.name" class="ri-2x"></i>
						</div>
					</div>
				</div>
			</div>
			<div class="mt-3" v-if="pageData.pageCount > 1">
				<yppage @topage="topage" :pageData="pageData" />
			</div>
		</div>
	</div>
</template>
<script setup>
	import { router } from '@/router'
	import { getData, postData } from '@/common/base'
	import { reactive, ref, onMounted } from 'vue'
	const props = defineProps({
		modelValue: {
			default: 'ri-question-fill',
		},
		placeholder: {
			type: String,
		},
	})
	const dataList = reactive([])
	//分页
	const pageData = reactive({
		totalRecords: 0, //总记录数
		pageCount: 0, //总页数
		currentPage: router.currentRoute.value.query.page || 1,
	})
	const limit = ref(50)
	const emit = defineEmits(['update:modelValue'])

	const handleSelect = (str) => {
		emit('update:modelValue', str)
		isUpload.value = false
	}
	const isUpload = ref(false)

	const topage = (page) => {
		pageData.currentPage = page
		router.push('?page=' + page)
		getList()
	}

	const getList = async () => {
		const res = await getData('/icon', {
			page: pageData.currentPage,
			limit: limit.value,
		})
		const { data, last_page, total } = res.data
		pageData.totalRecords = total
		pageData.pageCount = last_page
		dataList.length = 0
		data.map((item) => {
			dataList.push(item)
		})
	}

	onMounted(() => {
		getList()
	})
</script>
